<template>
    <div class="bind_bag">
        <top-timer/>
        <div class="bind_box">
            <div class="box_title center">
                <div class="font_40 col_333">绑定收纳袋</div>
                <div class="font_28 col_666">请在屏幕下方的扫码器上扫描收纳袋上的条码/二维码</div>
            </div>
            <div class="box_form">
                <div class="border1" v-if="keyboard.borderNum==='01'"></div>
                <!--<el-input v-model="bagCode" placeholder="请输入收纳袋编码" />-->
                <el-input placeholder="请输入收纳袋编码" v-model="bagCode" readonly="readonly" data-layout="compact"
                          @focus="show($event,'01')" :class="keyboard.borderChecked==='01'?'input_checked':''"/>
                <vue-touch-keyboard :options="keyboard.options" v-if="keyboard.visible" :layout="keyboard.layout" :cancel="hide"
                                    :accept="accept" :input="input"/>
                <el-button type="primary" class="col_fff font_M" @click="bindBag()">确认</el-button>
            </div>
        </div>
        <top-tips/>
    </div>
</template>

<script>
  export default {
    name: 'bind-bag',
    data() {
      return {
        bagCode: '',
        boxCode: this.$route.query.boxCode,
        keyboard:{
          visible: false,
          layout: 'compact',
          input: null,
          borderNum: '',
          borderChecked:'',
          options:{
            useKbEvents: false,
            preventClickEvent: false,
          }
        }
      };
    },
    created() {
      window.addEventListener('keydown', this.handleKeydown);
    },
    destroyed() {
      window.removeEventListener('keydown', this.handleKeydown);
    },
    methods: {
      accept (text) {
        this.hide()
      },
      show (e, borderNum) {
        this.keyboard.borderNum = borderNum
        this.keyboard.borderChecked = borderNum
        if (e.path[0].value !== '') {
          this.keyboard.borderNum = ''
        }
        this.input = e.target
        this.keyboard.layout = e.target.dataset.layout
        if (!this.keyboard.visible)
          this.keyboard.visible = true
      },
      hide () {
        this.keyboard.visible = false
        this.keyboard.borderNum = ''
      },
      bindBag() {
        if (this.bagCode === '') {
          this.$alert('收纳袋编码不能为空');
          return;
        }
        let success = () => {
          this.openCuboard();
        };
        let error = () => {
          this.$alert('开箱失败，请联系客服，联系方式见屏幕下方！');
        };
        let boxMac = this.$boxConfig[this.boxCode];
        window.cordova.plugins.CabinetPlugin.sendOpenBoxCommand(boxMac, success, error);
      },
      openCuboard() {
        let boxDetailId = this.$route.query.boxDetailId;
        let orderId = this.$route.query.orderId;
        this.$axios.post('receiveClothesRest/createReceiveClothes', {
          bagCode: this.bagCode,
          boxDetailId: boxDetailId,
          orderId: orderId,
        }).then(res => {
          if (res.data.result) {
            this.$router.push({
              path: 'receiveOpenCupboard',
              query: {boxCode: this.boxCode, boxDetailId: boxDetailId},
            });
          } else {
            this.$message.error(res.data.msg);
          }
        });
      },
      handleKeydown(event) {
        if (event.keyCode == 13) {
          // this.bindBag();
        } else {
          this.bagCode = this.bagCode + String.fromCharCode(event.keyCode);
        }
      },
    },
  };
</script>

<style lang="scss">
    .bind_bag {
        .bind_box {
            .box_title {
                div {
                    margin: 0.20rem 0;
                }
            }

            .box_form {
                padding: 0 0.80rem;
                position: relative;
                .border1 {
                    position: absolute;
                    height: 0.4rem;
                    border-left: 1px solid #000;
                    top: 0.65rem;
                    z-index: 99;
                    left: 1.1rem;
                }
                .el-input {
                    margin-top: 0.40rem;
                    border-radius: 0.16rem;
                    background-color: #ECF5FC;
                    overflow: hidden;
                    border: 1px solid transparent;
                }

                input {
                    padding: 0 0.40rem;
                    border: none;
                    background-color: #ECF5FC;
                    line-height: 0.9rem;
                    height: 0.9rem;
                    font-size: 0.32rem;

                    &::placeholder {
                        color: #999999;
                    }
                }
                .input_checked{
                    border:1px solid #0a82ec;
                }

                button {
                    width: 100%;
                    height: 1.20rem;
                    font-size: 0.50rem;
                    border-radius: 0.70rem;
                    background-color: #0A82EC;
                    margin-top: 0.80rem;
                }
            }
        }
    }
</style>
